import React, { Component, Fragment } from "react";
import "./style.css";
import XjjItem from "./XjjItem";
// import Imrc from "./imrc";
// import axios from "axios";
import Boss from "./Boss";
import { CSSTransition, TransitionGroup } from "react-transition-group";

class Xjj extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      list: ["tt", "ff"],
    };
    // this.handleInput = this.handleInput.bind(this)
    this.handleRemove = this.handleRemove.bind(this);
  }

  handleInput() {
    this.setState({
      inputValue: this.input.value,
    });
  }
  handleAdd() {
    if (!this.state.inputValue) return;
    const list = [...this.state.list, this.state.inputValue];
    this.setState(
      {
        list,
        inputValue: "",
      },
      () => {
        console.log(this.ul.querySelectorAll("li").length);
      }
    );
  }
  handleRemove(i) {
    console.log(i);
    const list = this.state.list.slice();
    let arr = list.slice(0, i).concat(list.slice(i + 1));
    this.setState({
      list: arr,
    });
  }

  componentDidMount() {
    // axios.post
  }
  render() {
    return (
      <Fragment>
        {/*注释*/}
        <div>
          <label htmlFor="tt">增加</label>
          <input
            ref={(input) => {
              this.input = input;
            }}
            id="tt"
            className="input"
            onChange={this.handleInput.bind(this)}
            value={this.state.inputValue}
            type="text"
          />
          <button onClick={this.handleAdd.bind(this)}>增加</button>
        </div>
        <ul
          ref={(ul) => {
            this.ul = ul;
          }}
        >
          <TransitionGroup>
            {this.state.list.map((item, index) => {
              return (
                <CSSTransition
                  timeout={2000}
                  classNames="boss-text"
                  appear={true}
                  unmountOnExit
                  key={index + item}
                >
                  <XjjItem
                    key={index + item}
                    onRemove={this.handleRemove.bind(this, index)}
                    item={item}
                    index={index}
                  />
                </CSSTransition>
              );
            })}
          </TransitionGroup>
        </ul>
        {/* <Imrc list={this.state.list}/> */}
        <Boss />
      </Fragment>
    );
  }
}

export default Xjj;
